<template>
  <div class="login">
    <!-- header可以通过div盒子slot属性=header 以及使用el-card组件的header属性,还可以通过template具名插槽实现 -->
     <!-- 默认加阴影 可通过shadow属性控制 -->
    <el-card class="box-card" :body-style="{padding:'20px'}" header="登录" >
   <!--      <div slot="header" class="clearfix">
            <span>面经运营后台</span>
        </div> -->
      <!--   <template #header>
           <div class="clearfix">你好呀</div>
        </template> -->
        <div class="header" slot="header">
            <span>面经运营后台</span>
        </div>
        <!-- hide-required-asterisk: 是否隐藏必填字段的标签旁边的红色星号 -->
       <el-form ref="ruleForm" :model="ruleForm" :rules="rules" hide-required-asterisk >
        <el-form-item label="用户名"  size="medium" prop="username" autocomplete>
            <el-input type="text" v-model="ruleForm.username" placeholder="请输入用户名" clearable/>
        </el-form-item>
        <el-form-item label="密码"  prop="password">
            <el-input type="password" v-model="ruleForm.password" placeholder="请输入密码" show-password/>
        </el-form-item>
      <el-form-item>
        <el-row>
            <el-button @click="submitForm" class="btn-login">登录</el-button>
            <el-button @click="resetForm">重置</el-button>
        </el-row>
      </el-form-item>
       </el-form>
    </el-card>
  </div>
</template>

<script>

export default {
  name: 'loginIndex',
  data () {
    return {
      ruleForm: {
        username: '',
        password: ''
      },
      rules: {
        // 只是简单的校验必填 如果要自定义可通过设置validator属性传一个函数进去
        password: [
          {
            required: true,
            message: '请输入密码',
            // 触发时机,失焦,输入内容改变
            trigger: ['blur', 'change']
          }, { min: 5, max: 11, message: '长度在 5 到 11 个字符', trigger: ['blur', 'change'] }
        ],
        // 是一个数组因为支持多个校验规则
        username: [
          {
            required: true,
            message: '请输入用户名',
            trigger: ['blur', 'change']
          },
          { pattern: /^\w{5,11}$/, message: '请输入 5 到 10 位的密码', trigger: ['blur', 'change'] }
        ]
      }
    }
  },
  methods: {
    submitForm () {
      // form自带的表单校验方法,校验通过则提交表单
      this.$refs.ruleForm.validate((valid) => {
        console.log(valid)
        if (!valid) {
          console.log('登录失败', valid)
          return
        }
        // actions才能处理异步代码
        this.$store.dispatch('user/loginAction', this.ruleForm)
      })
    },
    resetForm () {
      // form表单自带的重置方法
      this.$refs.ruleForm.resetFields()
    }

  }
}
</script>

<style lang="scss" scoped>
.login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    .box-card {
        width: 420px;
        // 这样设置样式不会有效果,因为这是组件的样式
        // .el-card__header{
        //     background-color: #727cf5 !important
        // }
        //可以通过深度作用选择器来改变组件的样式
        //深度作用选择器:允许你穿透组件的样式作用域，修改子组件的样式。
        ::v-deep .el-card__header {
            background-color: #727cf5;
            text-align: center;
            color: white;
            height: 80px;
            line-height: 40px;
            font-size: 18px;
        }
        .btn-login{
            background-color: #727cf5;
            color: #fff;
        }
    }
}
</style>
